<template>
  <div>
    <a-button type="primary" icon="plus" @click="addshowModal">新增菜单</a-button>
    <!-- 新增菜单按钮的弹出框 -->
    <a-modal v-model="visible" :title="modaltitle" @ok="handleOk">
      <a-form-model :model="form" :label-col="labelCol" :wrapper-col="wrapperCol">
        <a-form-model-item label="菜单名称">
          <a-input v-model="form.name" />
        </a-form-model-item>
        <a-form-model-item label="所属应用">
          <a-select v-model="form.region" placeholder="请选择所属应用">
            <a-select-option value="1">web</a-select-option>
            <a-select-option value="2">app</a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item label="是否显示">
          <a-switch checked-children="是" un-checked-children="否" v-model="form.delivery" />
        </a-form-model-item>
        <a-form-model-item label="菜单层级">
          <a-radio-group v-model="form.resource">
            <a-radio value="1">目录</a-radio>
            <a-radio value="2">页面</a-radio>
          </a-radio-group>
        </a-form-model-item>
        <a-form-model-item label="路径" v-if="form.resource == 2">
          <a-input v-model="form.menuUrl" />
        </a-form-model-item>
        <a-form-model-item label="所属父级菜单" v-if="form.resource == 2">
          <a-select style="width: 200px" @change="handleChangecd" v-model="form.parentId">
            <!-- 新增加了v-model="form.parentId "如果有问题请去掉 -->
            <a-select-option
              :value="item.id"
              v-for="(item, index) in seledata"
              :key="index"
            >{{ item.menuName }}</a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item label="图标" v-if="form.resource == 1">
          <a-input v-model="form.icon" />
        </a-form-model-item>
        <a-form-model-item label="是否有读写权限">
          <a-select v-model="form.readorwrite" placeholder="请选择">
            <a-select-option value="0">是</a-select-option>
            <a-select-option value="1">否</a-select-option>
          </a-select>
        </a-form-model-item>
      </a-form-model>
    </a-modal>
    <!-- table -->
    <a-table
      :columns="columns"
      :data-source="data"
      :rowKey="record=>record.id"
      defaultExpandAllRows
    >
      <span slot="action" slot-scope="text, record">
        <a @click="handleEdit(record)">编辑</a>
        <a-divider type="vertical" />
        <a @click="handleDel(record)">删除</a>
      </span>
      <span slot="icon" slot-scope="text, record">
        <template>
          <a-icon v-if="record.icon" :type="record.icon" />
        </template>
      </span>
    </a-table>
  </div>
</template>

<script>
import {
  createcdurl,
  deletecdurl,
  editcdurl,
  searchcdurl
} from "../../api/index.js";
export default {
  data() {
    return {
      visible: false,
      parentId: null,
      modaltitle: "新增菜单",
      labelCol: { span: 6 },
      wrapperCol: { span: 16 },
      form: {
        name: "",
        icon: "",
        resource: "",
        menuUrl: "",
        region: undefined,
        readorwrite: undefined,
        delivery: false
      },
      columns: [
        { title: "菜单名称", dataIndex: "menuName" },
        {
          title: "类型",
          dataIndex: "type",
          customRender: function(text) {
            if (text == "1") {
              return "web";
            } else if (text == "2") {
              return "app";
            }
          }
        },
        { title: "路径", dataIndex: "menuUrl" },
        ,
        { title: "是否显示", dataIndex: "isshow" },
        {
          title: "图标",
          dataIndex: "icon",
          scopedSlots: { customRender: "icon" }
        },
        { title: "读写权限", dataIndex: "readorwrite" },
        {
          title: "操作",
          scopedSlots: { customRender: "action" }
        }
      ],
      seledata: [ ],
      data: [ ]
    };
  },
  mounted() {
    this.query();
  },
  methods: {
    query() {
      this.$axios.post("/menu/service/findByPage").then(res => {
        if (res.code == 200) {
          this.data = res.data;
          localStorage.setItem("menuList",JSON.stringify(res.data))
          var ondata = this.data;
          var newdata = [];
          ondata.forEach(item => {
            if (item.parentId == null) {
              newdata.push(item);
            }
          });
          this.seledata = newdata;
        }
      });
    },
    handleChangecd(value) {
      //选择的是菜单
      console.log(value); //parentId值
      this.parentId = value;
    },
    addshowModal() {
      //点击模态框弹出
      this.visible = true;
      this.modaltitle= "新增菜单"
      this.form = {};
    },
    handleOk() {
      console.log(this.form);
      if (this.form.resource == 1 && this.modaltitle=="新增菜单" ) {
        //新增的目录
        let data = {
          icon: this.form.icon,
          isshow: this.form.delivery == true ? 1 : 0,
          menuName: this.form.name,
          readorwrite: this.form.readorwrite,
          type: this.form.region,
          menuUrl: "",
        };
        this.$axios.post("/menu/service/create", data).then(res => {
          if (res.code == 200) {
            this.$message.success(res.msg);
            this.visible = false;
            this.query();
            this.$router.go(0);
          }
        });
      } else if(this.form.resource == 2 && this.modaltitle=="新增菜单") {
        //新增页面
        let data = {
          parentId: this.parentId,
          icon: "",
          isshow: this.form.delivery == true ? 1 : 0,
          menuName: this.form.name,
          menuUrl: this.form.menuUrl,
          readorwrite: this.form.readorwrite,
          type: this.form.region
        };
        this.$axios.post("/menu/service/create", data).then(res => {
          if (res.code == 200) {
            this.$message.success(res.msg);
            this.visible = false;
            this.query();
            this.$router.go(0);
          }
        });
      }else if(this.modaltitle =="编辑" && this.form.resource == 1){
        console.log(this.form)
        let data = {
          parentId: this.form.parentId,
          id: this.form.id,
          icon: "",
          isshow: this.form.delivery == true ? 1 : 0,
          menuName: this.form.name,
          menuUrl: this.form.menuUrl,
          readorwrite: this.form.readorwrite,
          type: this.form.region
        };
        this.$axios.post("/menu/service/edit", data).then(res => {
          if (res.code == 200) {
            this.$message.success(res.msg);
            this.visible = false;
            this.query();
            this.$router.go(0);
          }
        });

      }else if(this.modaltitle =="编辑" && this.form.resource == 2){
          let data = {
          parentId: this.form.parentId,
          id: this.form.id,
          icon: "",
          isshow: this.form.delivery == true ? 1 : 0,
          menuName: this.form.name,
          menuUrl: this.form.menuUrl,
          readorwrite: this.form.readorwrite,
          type: this.form.region
        };
        this.$axios.post("/menu/service/edit", data).then(res => {
          if (res.code == 200) {
            this.$message.success(res.msg);
            this.visible = false;
            this.query();
            this.$router.go(0);
          }
        });
      }
    },
    handleEdit(record) {
      console.log("编辑", record);
      this.modaltitle ="编辑"
      this.visible = true;
      if (record.parentId == null || record.parentId == "") {
        //编辑的是菜单
        this.form = {
          name: record.menuName,
          region: record.type.toString(),
          delivery: record.isshow == 0 ? false : true,
          resource: record.parentId == null ? "1" : "2",
          menuUrl: record.menuUrl,
          icon: record.icon,
          readorwrite: record.readorwrite,
          id : record.id,
          parentId: record.parentId
        };
      } else {
        //编辑页面
        this.form = {
          name: record.menuName,
          region: record.type.toString(),
          delivery: record.isshow == 0 ? false : true,
          resource: record.parentId == null ? "1" : "2",
          menuUrl: record.menuUrl,
          icon: "",
          readorwrite: record.readorwrite,
          id : record.id,
          parentId: record.parentId
        };
      }
    },
    handleDel(record) {
      //删除
      let data = {
        id: record.id,
        menuName: record.menuName
      };
      let that = this;
      this.$confirm({
        title: "是否删除?",
        okText: "是的",
        okType: "danger",
        cancelText: "取消",
        onOk() {
          that.$axios.post("/menu/service/deleteByIds", data).then(res => {
            if (res.code == 200) {
              that.$message.success(res.msg);
              that.query();
              this.$router.go(0);
            }
          });
        },
        onCancel() {
          that.$message.success("取消操作");
        }
      });
    }
    
  }
};
</script>

<style lang="scss" scoped>
</style>
